@import '../../../style/theme/index.less';

@mi-menu: ~'@{mi-prefix}menu';
@mi-sider-menu: ~'@{mi-prefix}layout-sider-menu';
@ant-menu: ant-menu;
@ant-submenu: ant-menu-submenu;

.@{mi-menu} {
    color: @mi-white-color;
    background: var(--mi-sider-color, @mi-sider-color);
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
        display: none;
    }
    overflow-x: hidden;
    overflow-y: scroll;

    & &-items,
    & &-item {
        min-height: @mi-sider-item-height;
        line-height: @mi-sider-item-height;
        color: @mi-white-color;
        transition: unset;
        overflow: hidden;
    }

    &-item {
        &-title {
            .flex(flex-start, center);
            height: @mi-sider-item-height;
            .properties(line-height, 18);
            flex-direction: column;
    
            .sub {
                .properties(font-size, 12);
                color: var(--mi-menu-sub-color, @mi-menu-sub-color);
                .properties(line-height, 16);
                .properties(margin-top, 4);
            }
        }

        &-tag {
            .tag();
            position: absolute;
            .properties(right, 36);
            .properties(top, 14);
            margin: 0;
        }
    
        &-icon {
            position: absolute;
            .properties(right, 36);
            .properties(top, 18);
            color: var(--mi-theme-color, @mi-theme-color);
            margin-right: 0
        }

        & &-link {
            .flex(center, flex-start);
            color: @mi-white-color;
            transition: unset;
        }
    }

    & &-items {
        .@{ant-menu} {
            &-submenu-title {
                .flex(center, flex-start);
                height: @mi-sider-item-height;
                line-height: @mi-sider-item-height;
                color: var(--mi-menu-color, @mi-menu-color);
                transition: unset;

                .@{ant-submenu}-arrow {
                    opacity: 1;
                    &:before,
                    &:after {
                        background: var(--mi-menu-color, @mi-menu-color);
                    }
                }

                &:hover {
                    color: var(--mi-theme-color, @mi-theme-color);

                    .@{ant-submenu}-arrow {
                        &:before,
                        &:after {
                            background: var(--mi-theme-color, @mi-theme-color);
                        }
                    }

                    .@{mi-menu}-item-title {
                        .sub {
                            color: var(--mi-theme-color, @mi-theme-color);
                        }
                    }
                }
            }

            &-sub {
                background: var(--mi-menu-sub-bg-color, @mi-menu-sub-bg-color);
                box-shadow: none;
                overflow: hidden;
                position: relative;
            }
        }

        & .@{mi-menu} {
            &-item {
                height: @mi-sider-item-height;
                line-height: @mi-sider-item-height;

                & .@{mi-menu}-item-link {
                    color: var(--mi-menu-color, @mi-menu-color);
                }

                &:hover {
                    .@{mi-menu}-item-link {
                        color: var(--mi-theme-color, @mi-theme-color);
                    }
                }
            }
        }
    }

    & &-items-active {
        > .@{ant-submenu} {
            &-title {
                color: var(--mi-theme-color, @mi-theme-color);

                .@{ant-submenu}-arrow {
                    &:before,
                    &:after {
                        background: var(--mi-theme-color, @mi-theme-color);
                    }
                }

                .sub {
                    color: var(--mi-menu-active-sub-color, @mi-menu-active-sub-color);
                }
            }
        }
    }

    & &-items-active.@{ant-submenu}-open {
        > .@{ant-submenu} {
            &-title {
                color: var(--mi-menu-color, @mi-menu-color);

                .@{ant-submenu}-arrow {
                    &:before,
                    &:after {
                        background: var(--mi-menu-color, @mi-menu-color);
                    }
                }

                .sub {
                    color: var(--mi-menu-sub-color, @mi-menu-sub-color);
                }
            }
        }
    }

    &.@{ant-menu}-dark &-item {
        &:not(:last-child) {
            margin-bottom: 0;
        }

        > a {
            color: var(--mi-menu-color, @mi-menu-color);
        }

        &.@{ant-menu}-item-selected {
            background-color: var(--mi-menu-active-color, @mi-menu-active-color);

            .@{mi-menu}-item-link,
            .anticon, .anticon + span {
                color: var(--mi-theme-color, @mi-theme-color);
            }

            .@{mi-menu}-item-title {
                .sub {
                    color: var(--mi-menu-active-sub-color, @mi-menu-active-sub-color);
                }
            }
        }

        &:hover {
            .@{mi-menu}-item-link,
            .anticon, .anticon + span {
                color: var(--mi-theme-color, @mi-theme-color);
            }

            .@{mi-menu}-item-title {
                .sub {
                    color: var(--mi-menu-active-sub-color, @mi-menu-active-sub-color);
                }
            }
        }

        &:after {
            border-right: 3px solid var(--mi-theme-color, @mi-theme-color);
        }
    }

    &.@{ant-menu}-dark > &-item,
    &.@{ant-menu}-dark > .@{ant-submenu} {
        &:last-child {
            .properties(margin-bottom, 24);
        }
    }
}

.ant-layout-sider {
    &-collapsed {
        & .@{mi-menu} {
            width: @mi-sider-width-sm;

            & > .@{mi-menu} {
                &-item, &-items {
                    .flex();
                    width: @mi-sider-width-sm;

                    .@{mi-menu}-item-link {
                        & .anticon {
                            .flex();
                            .properties(font-size, 20);
                        }
                    }

                    &.@{ant-menu}-item-selected {
                        &:after {
                            transform: scaleY(1);
                            opacity: 1;
                        }
                    }
                }

                &-items-active {
                    position: relative;
                    background: var(--mi-menu-active-color, @mi-menu-active-color);

                    &:after {
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        bottom: 0px;
                        border-right: 3px solid rgb(24, 144, 255);
                        transform: scaleY(1);
                        opacity: 1;
                        content: "";
                        border-right: 3px solid var(--mi-theme-color, @mi-theme-color);
                    }
                }

                &-items-active.@{ant-submenu}-open {
                    background: var(--mi-sider-color, @mi-sider-color);

                    &:after {
                        opacity: 0;
                        transform: scaleY(0.0001);
                    }
                }
            }
        }

        & .@{ant-menu} {
            & > .@{ant-submenu} {
                & > .@{ant-submenu}-title {
                    .properties(padding-left, 30) !important;
                    .properties(padding-right, 30) !important;

                    .anticon {
                        .properties(min-width, 20);
                        .properties(font-size, 20);
                        line-height: 0;
                    }
                }
            }
        }
    }
}

.@{ant-menu} {
    &:not(.@{ant-menu}-inline) {
        .@{ant-submenu} {
            &-open,
            &-active {
                color: var(--mi-theme-color, @mi-theme-color);
            }
        }
    }

    .@{ant-submenu}-popup {
        background: var(--mi-sider-color, @mi-sider-color);
        z-index: 19900407;
    }

    &-dark {
        &.@{ant-submenu}-popup {
            z-index: 19900407;

            .@{ant-menu} {
                &-sub {
                    transition: unset;
                    background: var(--mi-sider-color, @mi-sider-color);
                    color: var(--mi-menu-color, @mi-menu-color);
                }

                &-item {
                    transition: none;
                    min-height: @mi-sider-item-height;
                    .flex(center, flex-start);

                    > a {
                        .flex();
                        color: var(--mi-menu-color, @mi-menu-color);
                        transition: none;

                        &:hover {
                            color: var(--mi-theme-color, @mi-theme-color);
                        }
                    }

                    &-selected {
                        background-color: var(--mi-menu-active-color, @mi-menu-active-color);

                        .@{mi-menu} {
                            &-item {
                                &-link {
                                    color: var(--mi-theme-color, @mi-theme-color);
                                    
                                    .anticon, .anticon + span {
                                        color: var(--mi-theme-color, @mi-theme-color);
                                    }
                                }

                                &-title {
                                    .sub {
                                        color: var(--mi-menu-active-sub-color, @mi-menu-active-sub-color);
                                    }
                                }
                            }
                         }

                         &:after {
                            border-right: 3px solid var(--mi-theme-color, @mi-theme-color);
                            transform: scaleY(1);
                            opacity: 1;
                        }
                    }

                    .@{mi-menu}-item {
                        &-tag {
                            display: none;
                        }

                        &-title + .anticon {
                            display: none;
                        }
                    }
                }
            }
        }
    }

    &-vertical > &-submenu > &-submenu-title {
        .flex(center, flex-start);
        height: @mi-sider-item-height;
        line-height: @mi-sider-item-height;

        .@{ant-submenu}-arrow {
            opacity: 1;
        }

        &:hover {
            color: var(--mi-theme-color, @mi-theme-color);

            .@{ant-submenu}-arrow {
                &:before,
                &:after {
                    background: var(--mi-theme-color, @mi-theme-color);
                }
            }
        }
    }

    &-vertical > &-submenu-active > &-submenu-title {
        .@{ant-submenu}-arrow {
            &:before,
            &:after {
                background: var(--mi-theme-color, @mi-theme-color);
            }
        }
    }

    &-vertical &-item:not(:last-child) {
        margin-bottom: 0;

        > a {
            color: var(--mi-menu-color, @mi-menu-color);
        }
    }
}

.ant-tooltip-inner {
    min-height: 0;
}

.@{mi-sider-menu} {
    margin-top: @mi-header-height + 0.5;
    height: calc(100vh - @mi-header-height);
    width: @mi-sider-width;

    &-drawer {
        .ant-drawer-body {
            padding: 0;
        }
    }
}